<template>
	<view class="app-header-wrapper" :style="`background-color: ${backColor};`">
		<view class="app-header-left">
			<view class="app-header-item">
				<view class="image-icons app-header-icon icon-back" @click="Back">
					<image :src="`../../static/images/${img_url}.png`" mode=""></image>
				</view>
			</view>
		</view>
		<template v-if="isShow">
			<view class="app-header-middle">
				<view class="app-header-title text-ellipsis">
					{{title}}
				</view>
			</view>
			<view class="app-header-right"></view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "mfbs-header",
		props:{
			isShow:{
				type:Boolean,
				default:false
			},
			backColor:{
				type:String,
				default:'transparent'
			},
			img_url:{
				type:String,
				default:'left'
			},
			title:{
				type:String,
				default:''
			},
		},
		data() {
			return {

			};
		},
		methods:{
			Back(){
				uni.navigateBack(-1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.app-header-wrapper {
		background-color: rgb(244, 244, 244);
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 50%;
		width: 7.2rem;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: .85rem;
		color: #666;
		padding: 0;
		transition: transform .2s ease-out;

		&>view {
			display: flex;
			align-items: center;
		}

		.app-header-item {
			display: block;
			width: 0.6rem;
			margin: 0 0.2rem;
		}

		.app-header-left {

			.app-header-item {

				.icon-back {
					width: 0.5rem;
					height: 0.5rem;
					line-height: .6rem;

					image {
						width: 0.5rem;
						height: 0.5rem;
					}
				}
			}
		}

		.app-header-middle {
			flex: 1;
			text-align: center;
			min-width: 0;

			.app-header-title {
				color: rgb(51, 51, 51);
				width: 100%;
				font-size: .34rem;
			}
		}

		.app-header-right {
			min-width: 1rem;
		}
	}
</style>